<script setup>
import { ref,computed,watch } from 'vue'
import analyzeData from '../../apis/anlyze.js'

const showDrawer = computed({
  get:()=> props.flag,
  set:(flag)=> emits('update:flag', flag)
})

const userInfo = ref({})
console.log(userInfo.value)

const emits = defineEmits(['update:flag'])
// 如果从父组件传入 userId
const props = defineProps({
  userId: {
    type: String,
    required: true,
  },
  flag:{
    type:Boolean,
    default:true
  }
})
console.log(props.userId)
const fetchData = async (userId) => {
  try {
    const res = await analyzeData.getElderlyTaskList({userId})
    userInfo.value = res

  } catch (err) {
    console.error('获取老人数据失败', err)
  }
}

watch(
    () => props.userId,
    async (newUserId) => {
      if (newUserId) {
        console.log('接收到 userId:', newUserId)
        await fetchData(newUserId)
      }
    },
    { immediate: true }
)
</script>

<template>
  <el-drawer v-model="showDrawer" title="老人详情" direction="rtl" size="50%" class="custom-drawer">
    <el-descriptions :column="2" border class="custom-descriptions">
      <el-descriptions-item label="姓名">{{ userInfo.elderlyName }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{ userInfo.elderlyId }}</el-descriptions-item>
      <el-descriptions-item label="年龄">{{ userInfo.age }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ userInfo.gender }}</el-descriptions-item>
      <el-descriptions-item label="居住地">{{ userInfo.residence }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ userInfo.contactNumber }}</el-descriptions-item>
      <el-descriptions-item label="是否独居">{{ userInfo.isLivingAlone ? '是' : '否' }}</el-descriptions-item>
      <el-descriptions-item label="能否自理">{{ userInfo.selfCare ? '能' : '不能' }}</el-descriptions-item>
      <el-descriptions-item label="家属电话">{{ userInfo.familyContactNumber || '无' }}</el-descriptions-item>
      <el-descriptions-item label="疾病">{{ userInfo.disease || '无' }}</el-descriptions-item>
    </el-descriptions>

    <div class="task-section">
      <h4>任务记录：</h4>
      <el-collapse accordion v-if="userInfo.tasks?.length">
        <el-collapse-item
            v-for="(task, index) in userInfo.tasks"
            :key="task.taskId"
            :title="task.taskTitle"
            :name="index"
            class="task-collapse-item"
        >
          <el-descriptions :column="1" class="task-descriptions">
            <el-descriptions-item label="$t(messages.Creation_Time)">{{ task.createdAt }}</el-descriptions-item>
            <el-descriptions-item label="任务内容">{{ task.taskContent }}</el-descriptions-item>
            <el-descriptions-item label="接受人ID">{{ task.receiverId || '无' }}</el-descriptions-item>
            <el-descriptions-item label="接受人姓名">{{ task.receiverName }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
      <p v-else class="no-task-tip">暂无任务记录</p>
    </div>
  </el-drawer>
</template>

<style scoped>
.custom-drawer {
  padding: 24px 32px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 抽屉标题加粗加大 */
.custom-drawer >>> .el-drawer__header {
  font-weight: 700;
  font-size: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

/* 描述列表字体和间距优化 */
.custom-descriptions {
  font-size: 14px;
  color: #333;
  margin-bottom: 24px;
}

.custom-descriptions >>> .el-descriptions-item__content {
  color: #555;
}

/* 任务标题字体加大加粗 */
.task-section h4 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
  color: #a4a8b4;
}

/* 每个任务折叠项的样式 */
.task-collapse-item >>> .el-collapse-item__title {
  font-weight: 600;
  font-size: 16px;
  color: #1c1f26;
}

/* 任务详情描述，内边距和背景色 */
.task-descriptions {
  background-color: #f5f7fa;
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 8px;
}

.task-descriptions >>> .el-descriptions-item__label {
  width: 100px;
  font-weight: 600;
  color: #606266;
}

.task-descriptions >>> .el-descriptions-item__content {
  color: #606266;
}

/* 没有任务时提示文字样式 */
.no-task-tip {
  color: #999;
  font-style: italic;
  text-align: center;
  margin-top: 20px;
}
</style>
